<template>
  <div>
    <!-- navbar -->
    <van-nav-bar title="易购" />
    <!-- 头部搜索框与登录头像 -->
    <div class="container">
      <van-row gutter="10" class="row1" type="flex" align="center">
        <van-col span="12" class="colitem"
          ><van-image
            width="2.5rem"
            height="2.5rem"
            fit="cover"
            round
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <span @click="login" v-if="!isLogin">点击登录</span>
          <div v-else><span>{{userinfo.name}}</span><span class="quit" @click="quit">退出</span></div>
        </van-col>
        <van-col span="12">
          <van-search
            v-model="value"
            shape="round"
            placeholder="搜索"
            style="padding: 0; font-size: 0.3rem"
          />
        </van-col>
      </van-row>
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="overflow: hidden; border-radius: 0.5rem; margin-top: 0.5rem"
        v-if="lbs"
      >
        <van-swipe-item v-for="item in lbs" :key="item.id">
          <img :src="item.url" alt="" width="100%" />
        </van-swipe-item>
        <!-- <van-swipe-item>
          <img src="/img/轮播图/243991c6208939bc.jpg" alt="" width="100%" />
        </van-swipe-item> -->
      </van-swipe>
      <!-- Grid精灵图 -->
      <van-grid style="margin-top: 0.5rem" :border="false">
        <van-grid-item
          style="
            text-align: center;
            font-size: 0.5rem;
            color: #333;
            white-space: nowrap;
          "
          v-for="item in jlts"
          :key="item.id"
        >
          <van-image
            round
            fit="cover"
            :src="item.url"
            width="1.8rem"
            height="1.8rem"
          />
          <div>{{ item.tit }}</div>
        </van-grid-item>
      </van-grid>
      <!-- 广告 -->
      <div>
        <img src="/img/首页广告/5e01de9461456633.png" alt="" width="100%" />
      </div>
      <!-- 商品 -->
      <div class="products" @click="todetail($event)">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onlistLoad"
          :offset="10"
        >
          <div class="item" v-for="item in pros" :key="item.id">
            <van-row type="flex">
              <van-col span="12" class="left">
                <img :src="item.url" alt="" width="80%"  :data-i="item.id"/>
              </van-col>
              <van-col span="12" class="right">
                <div class="title" :data-i="item.id">
                  {{ item.tit }}
                </div>
                <div class="sale">
                  <div>
                    <van-progress
                      :percentage="item.percentage"
                      stroke-width="6"
                      color="#F75342"
                    />
                  </div>
                </div>
                <div class="lj">累计销售:{{ item.sale }}</div>
                <div class="pfoot">
                  <div class="price">
                    <span class="nPrice">{{ item.Current_price }}</span
                    ><span class="dot">.{{ item.dot }}</span>
                    <span class="xPrice" v-show="item.Original_price">{{
                      item.Original_price
                    }}</span>
                  </div>
                  <div @click="dot = true">
                    <van-icon name="cart-o" size="25" />
                  </div>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </div>
    </div>
    <!-- tabbar -->
    <tabbar :dot="dot"></tabbar>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      closeable
      style="background-color: transparent"
      @close="closepop"
    >
      <div class="popup">
        <img src="/img/首页广告/5e01de9461456633.png" alt="" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import { lbs, jlts, products } from "../api";
import Tabbar from "../components/Tabbar.vue";
export default {
  computed: {
      ...mapState([
        'isLogin',"userinfo"
      ])
    },
  components: {Tabbar},
  data() {
    return {
      value: "",
      active: 0,
      show: null,
      dot: false,
      lbs: [],
      jlts: [],
      pros: [],
      loading: false,
      finished: false,
      page: 0,
    };
  },
  beforeMount() {
    this.closed();
    
  },
  mounted() {
    this.getlbsData();
    this.getjltsData();
    this.getproductsData();
  },
  methods: {
    //退出
    ...mapMutations(['quite']),
    quit(){
      this.quite()
    },
    // 登录跳转
    login(){
      this.$router.push('/login')
    },
    //跳转到详情页并携带参数
    todetail(e){
      if(e.target.dataset.i){
        this.$router.push({name:'Details',query:{id:e.target.dataset.i}})
      };
     
    },
    //滚动刷新
    async onlistLoad() {
      this.page++;
      let data = { page: this.page };
      setTimeout(async () => {
        const datas = await products(data);
        this.loading = false;
        console.log(this.page);
        if (this.page > 1) {
          this.pros = [...this.pros, ...datas.data.data];
        }
        if (datas.data.data.length == 0) {
          this.finished = true;
          return;
        }
      }, 1000);
    },
    async getproductsData() {
      const data = await products();
      this.pros = data.data.data;
    },
    async getjltsData() {
      const data = await jlts();
      this.jlts = data.data.data;
    },
    async getlbsData() {
      const data = await lbs();
      this.lbs = data.data.data;
    },
    closepop() {
      sessionStorage.setItem("closepop", 0);
    },
    closed() {
      if (!sessionStorage.getItem("closepop")) {
        this.show = true;
      } else {
        this.show = false;
      }
      console.log(sessionStorage.getItem("closepop"));
    },
  },
};
</script>

<style lang="scss" scoped>
.quit{
  color:#e74c3c !important;
  font-size: 0.5rem;
}
.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  width: 20rem;
  img {
    width: 100%;
  }
}
.products {
  img {
    display: block;
  }
  .item {
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #ddd;
    .left {
      display: flex;
      justify-content: center;
    }
    .sale {
      margin: 0.8rem 0;
    }
    .lj {
      color: #666;
      font-size: 0.4rem;
    }
    .right {
      .pfoot {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .price {
        margin-top: 0.5rem;
      }
      .xPrice {
        text-decoration: line-through;
        margin-left: 0.5rem;
        color: #999;
        font-size: 0.4rem;
      }
      .nPrice,
      .xPrice {
        &::before {
          content: "￥";
          font-size: 0.2rem;
        }
      }
      .dot {
        font-size: 0.5rem;
      }
      .nPrice,
      .dot {
        color: #fc392b;
      }
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 0.5rem;
        font-weight: bold;
      }
    }
  }
}
.container {
  margin-bottom: 55px;
  .van-swipe {
    img {
      display: block;
    }
  }
  margin-top: 0.3rem;
  box-sizing: border-box;
  padding: 0 10px;
  .colitem {
    display: flex;
    align-items: center;
    .van-image {
      flex: none;
    }
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
      font-weight: 600;
      font-family: "幼圆 YouYuan";
      margin-left: 0.5rem;
      font-size: 0.8rem;
    }
  }
}
</style>